import React from 'react';
import SelectType from 'views/component/selectType';
import { ShopApi } from 'js/api/shop';
import XDate from 'xdate';
import echarts from 'js/lib/echarts';
import $ from 'jquery';
import './flowPassageway.scss';
import moment from 'moment';
import { DatePicker, Icon } from 'antd-mobile';

let HOLIDAY_CODE = { 1: '元旦', 2: '春节', 3: '情人节', 4: '妇女节', 5: '清明节', 6: '劳动节', 7: '端午节', 8: '中秋节', 9: '国庆节', 10: '圣诞节' };
const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const monthType = ['上旬', '中旬', '下旬'];
const timeData = [{ id: 'hour', name: '时' }, { id: 'day', name: '日' }, { id: 'month', name: '月' }];
let chartFontSize = parseInt(window.fontSize / 4);

const FlowPassageway = React.createClass({
    getInitialState() {
        return { year: new Date().getFullYear(), loading: true }
    },
    componentDidMount() {
        this.getEntranceExitFlowData();
    },
    getEntranceExitFlowData() {
        let query = {
            ShopId: this.props.shopId,
            flowDataType: this.props.flowDataType,
            Year: this.state.year,
            AreaTypeId: this.props.AreaTypeId
        }
        this.setState({ loading: true })
        ShopApi.getEntranceExitFlowData(query, (data) => {
            this.setState({ loading: false })
            this.setEntranceEChart(data);
            this.setExitChart(data);
        });
    },
    setEntranceEChart(data) {
        let self = this,
            xAxisData = [],
            seriesData1 = [],
            seriesData2 = [],
            seriesData = [],
            total = 0,
            option;
        for (let i in data) {
            let name = data[i].DOORNAME
            if (name.length >= 3) {
                name = name.substring(0, parseInt(name.length / 2) + 1) + '\n' + name.substring(parseInt(name.length / 2) + 1)
            }
            xAxisData.push(name);
            seriesData1.push(data[i].INDATA);
            total += parseInt(data[i].INDATA);
        }

        let max = 0;
        for (let i in data) {
            if (parseInt(data[i].INDATA) === 0) {
                seriesData2.push('-');
                continue
            }
            let per = (parseInt(data[i].INDATA) / total * 100).toFixed(1);
            if (per > max) {
                max = parseInt(per) + 1;
            }
            seriesData2.push(per);
        }

        option = {
            textStyle: {
                fontSize: chartFontSize
            },
            animation: false,
            xAxis: [{
                type: 'category',
                boundaryGap: true,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    interval: 0,
                    margin: 20,
                    textStyle: {
                        color: '#9A9A9A',
                        fontSize: chartFontSize
                    }
                },
                data: xAxisData
            }, {
                type: 'category',
                splitLine: {
                    show: false
                },
                nameGap: 200,
                axisTick: {
                    show: false
                },
                axisLabel: false,
                data: xAxisData
            }],
            yAxis: [{
                type: 'value',
                axisLine: {
                    show: false,
                    onZero: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: false,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#3f4147'
                    }
                },
            }, {
                max: max * 2,
                min: 0,
                type: 'value',
                axisLine: {
                    show: false,
                    onZero: false,
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: false
            }],
            dataZoom: {
                type: 'inside',
                xAxisIndex: [
                    0, 1
                ],
                startValue: 0,
                endValue: 4,
                orient: 'horizontal'
            },
            grid: {
                width: '90%',
                left: '5%',
                height: '70%',
                top: '8%',
            },
            series: [{
                type: 'bar',
                yAxisIndex: 0,
                itemStyle: {
                    normal: {
                        color: '#6BD0E2'
                    }
                },
                barWidth: 25,
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#ccc'
                        }
                    }
                },
                data: seriesData1
            }, {
                type: 'line',
                yAxisIndex: 1,
                lineStyle: {
                    normal: {
                        color: '#F1CE7E'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'bottom',
                        formatter: '{c}%',
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                data: seriesData2
            }]
        };
        if (this.refs.entranceChart) {
            this.entranceChart = echarts.init(this.refs.entranceChart)
            this.entranceChart.setOption(option);
        }
    },
    setExitChart(data) {
        let self = this,
            xAxisData = [],
            seriesData1 = [],
            seriesData2 = [],
            seriesData = [],
            total = 0;

        for (let i in data) {
            let name = data[i].DOORNAME
            if (name.length > 6) {
                name = name.substring(0, 6) + '...'
            }
            if (name.length >= 3) {
                name = name.substring(0, parseInt(name.length / 2) - 1) + '\n' + name.substring(parseInt(name.length / 2) - 1)
            }
            xAxisData.push(name);
            seriesData1.push(data[i].OUTDATA);
            total += parseInt(data[i].OUTDATA);
        }

        let max = 0;
        for (let i in data) {
            if (parseInt(data[i].OUTDATA) === 0) {
                seriesData2.push('-');
                continue
            }
            let per = (parseInt(data[i].OUTDATA) / total * 100).toFixed(1);
            if (per > max) {
                max = parseInt(per) + 1;
            }
            seriesData2.push(per);
        }

        let option = {
            textStyle: {
                fontSize: chartFontSize
            },
            animation: false,
            title: {},
            xAxis: [{
                type: 'category',
                boundaryGap: true,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    interval: 0,
                    margin: 20,
                    textStyle: {
                        color: '#9A9A9A',
                        fontSize: chartFontSize
                    }
                },
                data: xAxisData
            }, {
                type: 'category',
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: false,
                data: xAxisData
            }],
            grid: {
                width: '90%',
                left: '5%',
                height: '70%',
                top: '8%',
            },
            yAxis: [{
                type: 'value',
                axisLine: {
                    show: false,
                    onZero: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: false,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#3f4147'
                    }
                },
            }, {
                max: max * 2,
                min: 0,
                type: 'value',
                axisLine: {
                    show: false,
                    onZero: false,
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: false
            }],
            dataZoom: {
                type: 'inside',
                xAxisIndex: [
                    0, 1
                ],
                startValue: 0,
                endValue: 4,
                orient: 'horizontal'
            },
            series: [{
                type: 'bar',
                yAxisIndex: 0,
                itemStyle: {
                    normal: {
                        color: '#439DCF'
                    }
                },
                barWidth: 25,
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#ccc'
                        }
                    }
                },
                data: seriesData1
            }, {
                type: 'line',
                yAxisIndex: 1,
                lineStyle: {
                    normal: {
                        color: '#F1CE7E'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'bottom',
                        formatter: '{c}%',
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                data: seriesData2
            }]
        };
        if (this.refs.exitChart) {
            this.exitChart = echarts.init(this.refs.exitChart);
            this.exitChart.setOption(option);
        }
    },
    yearOnChange(date) {
        this.setState({ year: moment(date).year() })
        this.getEntranceExitFlowData();
    },
    render() {
        return (
            <div id="flowPassageway" className="flowContent">
                <div className="flowHead">
                    <div className="title">出入口分析</div>
                </div>
                <div className="flex jc-end btn-line">
                    <DatePicker mode="year" maxDate={moment()} minDate={moment().subtract(11, 'years')} onChange={this.yearOnChange} className="right">
                        <div className="btn-select">年份:{this.state.year}<i className="icon-triangle"></i></div>
                    </DatePicker>
                </div>
                <div className="bottomTitle">入口分析图</div>
                {
                    this.state.loading ? <div className="chart flex-center" key={1}>
                        <Icon type="loading" size={'md'} />
                    </div> : <div className="chart flex-center" ref='entranceChart' key={2}></div>
                }
                <div className="flex-center bottomCon">
                    <div className="flex-g-1 flex-center"><span className="icon icon1"></span>入口总人数</div>
                    <div className="flex-g-1 flex-center"><span className="icon icon2"></span>入口人数占比</div>
                </div>
                <div className="bottomTitle">出口分析图</div>
                {
                    this.state.loading ? <div className="chart flex-center" key={3}>
                        <Icon type="loading" size={'md'} />
                    </div> : <div className="chart flex-center" ref='exitChart' key={4}></div>
                }
                <div className="flex-center bottomCon">
                    <div className="flex-g-1 flex-center"><span className="icon icon3"></span>出口总人数</div>
                    <div className="flex-g-1 flex-center"><span className="icon icon4"></span>出口人数占比</div>
                </div>
            </div>
        );
    }
})

module.exports = FlowPassageway;